<template>
  <div class="m-modal" v-show="show">
    <div class="modal-wrap">
      <div class="hd">
        <h1 v-text="title"></h1>
        <button @click="onClose"></button>
      </div>
      <div class="ct" v-html="content"></div>
      <div class="ft">
        <button class="ok" @click="onConfirmClose" v-text="confirm"></button>
        <button class="cancel" @click="onClose">取消</button>
      </div>
    </div>
    <div class="modal-mask"></div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: '提示'
      },
      content: {
        type: String,
        default: '操作失败'
      },
      confirm: {
        type: String,
        default: '确认'
      },
      onConfirm: {
        type: Function,
        default() {
          return () => {}
        }
      }
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
      onClose() {
        this.show = false
      },
      onConfirmClose() {
        this.show = false
        this.onConfirm && this.onConfirm()
      }
    }
  }
</script>

<style lang="scss" scoped>
.m-modal {
  position: fixed;
  z-index: 100;

  .modal-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: 420px;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;

    .hd {
      padding: 16px;
      border-bottom: 1px solid #f3f3f3;
      overflow: hidden;
      h1 {
        display: inline-block;
        font-size: 18px;
        color: #545454;
        font-weight: 500;
      }
      button {
        float: right;
        width: 16px;
        height: 16px;
        background: url('./close.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .ct {
      padding: 16px;
      min-height: 100px;
      max-height: 200px;
      line-height: 1.5;
      font-size: 16px;
      color: #545454;
      overflow-y: auto;
    }
    .ft {
      padding: 8px 16px;
      border-top: 1px solid #f3f3f3;
      text-align: right;
      button {
        padding: 7px 18px;
        margin-left: 6px;
        border: 1px solid #03a9f4;
        border-radius: 4px;
        &.ok {
          background: #03a9f4;
          color: #fff;
        }
        &.cancel {
          border-color: #d9d9d9;
          color: #666;
        }
      }
    }
  }
  .modal-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    background: rgba(0,0,0,.3);
  }
}
</style>
